<template>
  <div class="project_detail">
    <!-- 项目立项管理详情 -->
    <div class="wrap_sty_query">
      <div class="cell_sty" style="width:300px" v-for="(item,index) in row" :key="index">
        <span class="label_sty">{{item.title}}：</span>
        <span class="row_sty" :title="detail_info[item.key]">{{detail_info[item.key]}}</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="content">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" size="mini">
        <el-radio-button label="left">项目资料管理</el-radio-button>
        <el-radio-button label="center">项目进度管理</el-radio-button>
        <el-radio-button label="right">改造效果管理</el-radio-button>
      </el-radio-group>
      <div v-if="tabPosition==='left'">
        <div class="wrap_sty_query">
          <div class="cell_sty">
            <span class="label_sty">文件名称</span>
            <el-input v-model="queryParams.filename" placeholder="请输入项目经理" clearable size="mini" style="width: 240px" @keyup.enter.native="handleQuery" />
          </div>
          <div class="cell_sty">
            <span class="label_sty">文件类型</span>
            <el-select v-model="queryParams.filetype" placeholder="请选择状态" clearable size="mini" style="width: 240px">
              <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </div>
          <div class="cell_sty">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </div>
        </div>
        <el-table v-loading="loading" :data="infoList" size="mini">
          <el-table-column label="序号" type="index" width="120" />
          <el-table-column label="项目名称" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="文件名称" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="文件类型" prop="jhsx" />
          <el-table-column label="上传时间" align="center" prop="jhksrq" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.jhksrq) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
            <template slot-scope="">
              <el-button size="mini" type="text">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="tabPosition==='center'">
        <el-table v-loading="loading" :data="infoList" size="mini">
          <el-table-column label="序号" type="index" width="120" />
          <el-table-column label="项目名称" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="计划事项" prop="jhsx" />
          <el-table-column label="计划开始日期" align="center" prop="jhksrq" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.jhksrq) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划完成日期" align="center" prop="jhksrq" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.jhksrq) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际完成日期" align="center" prop="jhksrq" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.jhksrq) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="createTime" width="180">
            <template slot-scope="">
              <span>未启动</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="tabPosition==='right'">
        改造效果管理
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'project_detail',
  dicts: ['sys_normal_disable'],
  data() {
    return {
      tabPosition: "left",
      queryParams: {
        filename: '',
        filetype: ''
      },
      loading: false,
      infoList: [{
        name: '力学胡同1号改造项目',
        jhsx: '安装家具',
        jhksrq: '2020-08-01',
        zt: '未完成'
      }],
      row: [{
        title: "项目名称",
        key: "name",
        hiddle: true,
      }, {
        title: "计划成本",
        key: "jhcb",
        hiddle: true,
      }, {
        title: "施工单位",
        key: "sgdw",
        hiddle: true,
      }, {
        title: "项目经理",
        key: "xmjl",
        hiddle: true,
      }, {
        title: "联系方式",
        key: "lxfs",
        hiddle: true,
      }, {
        title: "计划启动日期",
        key: "jhqdrq",
        hiddle: true,
      }, {
        title: "计划结项日期",
        key: "jhjxrq",
        hiddle: true,
      }, {
        title: "实际启动日期",
        key: "sjqdrq",
        hiddle: true,
      }, {
        title: "状态",
        key: "zt",
        hiddle: true,
      }, {
        title: "关联院落",
        key: "glyl",
        hiddle: true,
      }, {
        title: "关联房屋",
        key: "glfw",
        hiddle: true,
      }],
      detail_info: {
        name: "力学胡同1号改造项目1111111111111111111111111111111111111111",
        jhcb: "35万元",
        sgdw: "北京A施工单位",
        xmjl: "张工",
        lxfs: "17349804141",
        jhqdrq: "2020-5-1",
        jhjxrq: "2020-8-15",
        sjjxrq: "2020-8-15",
        zt: "已结项",
        glyl: "力学胡同1号院",
        glfw: "1号房间"
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.line
  width: 100%
  height: 1px
  margin: 0px 10px
  background: #ccc
.content
  margin: 10px
</style>
